<template>
    <view>
        <u-form labelWidth="120px" labelPosition="left" :model="phoneInfo" :rules="rules" ref="phoneForm">
            <u-form-item label="新手机号" prop="nickname" borderBottom="true" ref="item1">
                <u-input v-model="phoneInfo.phone" border="none" placeholder="请输入新手机号"></u-input>
            </u-form-item>
            <u-form-item label="验证码" prop="code" borderBottom="true" ref="item1">
                <u-input v-model="phoneInfo.code" border="none" placeholder="请输入验证码"></u-input>
                <template #right>
                    <u-button class="btn getCodeBtn" :disabled="tips.indexOf('后重新获取') > -1" @tap="getCode">{{ tips
                    }}</u-button>
                </template>
            </u-form-item>
        </u-form>
        <u-button type="primary" text="确认修改" @click="toEdit"></u-button>
        <u-toast ref="toastRef"></u-toast>
        <u-modal :show="show_code" title="浮城书斋" :content='content' @confirm="() => { show_code = false }"></u-modal>
    </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import CONSTANTS from '@/utils/constants'
import { alterPhone } from '@/api/mine/mine'
const toastRef: any = ref(null)
let tips = ref('获取验证码')
const phoneForm: any = ref(null)
const content = ref('')
const show_code = ref(false)
let seconds = ref(30)
const phoneInfo = reactive({
    phone: '',
    code: ''
})
const code = reactive({
    value: '',
    time: new Date().getTime()
})

const getCode = () => {
    if (phoneInfo.phone.length <= 0) {
        content.value = '请先输入手机号'
        show_code.value = true
        return
    }
    if (!CONSTANTS.PATTERN.MOBILE.test(phoneInfo.phone)) {
        content.value = '请输入正确的手机号'
        show_code.value = true
        return
    }
    code.value = String(Math.floor((Math.random() + 1) * 100000))
    code.time = new Date().getTime()
    let i = seconds.value
    let timeInter = setInterval(() => {
        if (i > -1) {
            tips.value = i + '秒后重新获取'
            --i
        } else {
            tips.value = '重新获取'
            clearInterval(timeInter)
        }
    }, 1000)
    content.value = '您的验证码是：' + code.value + ',验证码有效时间30秒'
    show_code.value = true
}

const rules = ref({
    phone: [{
        type: 'string',
        required: true,
        pattern: CONSTANTS.PATTERN.MOBILE,
        // 正则检验前先将值转为字符串
        transform(value: any) {
            return String(value);
        },
        message: '手机号格式不合法'
    }],
    code: [
        {
            type: 'string',
            required: true,
            pattern: /^[0-9]{6}$/,
            // 正则检验前先将值转为字符串
            transform(value: any) {
                return String(value);
            },
            message: '验证码格式不合法'
        }
    ]
})


const toEdit = () => {
    if (code.value != phoneInfo.code) {
        content.value = '验证码错误'
        show_code.value = true
        return
    }
    let time = new Date().getTime()
    if (time > code.time + 30 * 1000) {
        content.value = '验证码已过期'
        show_code.value = true
        return
    }
    phoneForm.value.validate().then(() => {
        alterPhone({ phone: phoneInfo.phone }).then((res: any) => {
            if (res.code == 200) {
                toastRef.value.show({
                    type: 'success',
                    message: "手机号换绑成功",
                    duration: 3000,
                    position: 'top',
                    complete: function () {
                        uni.removeStorage({
                            key: 'user_token',
                            success: function () {
                                uni.redirectTo({
                                    url: '/pages/login/login'
                                })
                            },
                            fail: function () {
                                toastRef.value.show({
                                    type: 'error',
                                    message: "用户数据清空失败",
                                    duration: 3000,
                                    position: 'top',
                                })
                            }
                        });
                    }
                })
            }
        })
    })
}
</script>

<style lang="scss" scoped>
.getCodeBtn {
    background-color: #009a89;
    width: 230rpx;
    height: 50rpx;
    font-size: 16rpx;
    line-height: 50rpx;
    // float: left;
    // margin-left: 96rpx;
    border-radius: 25rpx;
    color: #FFF;
}
</style>